<template>
  <el-row>
    <el-col :span="24">
      <el-tabs v-model="activeName">
        <el-tab-pane label="回复管理" name="first">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>回复列表</span>
              <p class="tip">如果需要修改某回复请点击查看按钮</p>
            </div>
            <div style="padding:0 15px">
              <el-table
                :data="textDataList"
                style="width: 100%">
                <el-table-column
                  prop="title"
                  label="回复名称">
                </el-table-column>
                <el-table-column
                  prop="menuKey"
                  label="菜单回复规则">
                </el-table-column>
                <el-table-column
                  prop="textKey"
                  label="自动回复规则">
                </el-table-column>
                <el-table-column
                  prop="weight"
                  label="权重">
                </el-table-column>
                <el-table-column
                  label="操作">
                  <template slot-scope="scope">
                    <el-button @click="viewText(scope.row)" type="text" size="small">查看</el-button>
                    <el-button @click="deleteText(scope.row._id)" type="text" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="添加回复" name="second">
          <div style="padding-right:15px ">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>回复规则</span>
              </div>
              <div class="">
                <el-input placeholder="该回复名称" v-model="textData.title">
                  <template slot="prepend">该回复名称</template>
                </el-input>
                <p class="tip">
                  用于区分回复（不能为空）
                </p>
              </div>
              <div style="margin-top: 20px">
                <el-input placeholder="菜单匹配规则" v-model="textData.menuKey">
                  <template slot="prepend">菜单匹配规则</template>
                </el-input>
                <p class="tip">
                  菜单匹配规则是与自定义菜单中的匹配规则相对应！（可为空,建议使用英文字母）
                </p>
              </div>
              <div style="margin-top: 20px">
                <el-input placeholder="自动回复规则" v-model="textData.textKey">
                  <template slot="prepend">自动回复规则</template>
                </el-input>
                <p class="tip">
                  自动回复规则是当用户给公众号发送相关文字消息，公众号会根据相关设置自动回复!（注意！！此回复规则和图文回复规则不能重复，重复则判断权重，权重相同的随机回复其中一个）
                </p>
              </div>
              <div style="margin-top: 20px">
                <el-input placeholder="自动回复权重" v-model="textData.weight">
                  <template slot="prepend">回复权重</template>
                </el-input>
                <p class="tip">
                  如自动回复规则或菜单匹配规则有重复，则回复权重大者！只能为数字（如：订阅公众号 权重为1 ，服务公众号 权重为2。 用户发送 ‘公’，‘公众’，‘公众号’等字时，给用户的展示内容为‘服务公众号’）
                </p>
              </div>
            </el-card>
            <el-card class="box-card" style="margin-top: 20px">
              <div slot="header" class="clearfix">
                <span>回复内容</span>
              </div>
              <div class="text-input">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 6, maxRows: 8}"
                  placeholder="请输入内容"
                  :maxlength='200'
                  v-model="textData.textVal">
                </el-input>
                <span class="numText">{{textData.textVal.length}}/200</span>
              </div>
              <div style="text-align: center;margin-top: 20px">
                <el-button type="primary" @click="textSubmit()">提交</el-button>
              </div>
            </el-card>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-col>
  </el-row>
</template>

<script>
  export default {
    data() {
      return {
        textReplyBoolean: false,
        activeName: 'first',
        textData: {
          'title': '',
          'menuKey': '',
          'textKey': '',
          'type': 'text',
          'textVal': '',
          'weight': ''
        },
        textDataList: []
      }
    },
    mounted() {
      this.replyList()
    },
    methods: {
      deleteText(id) {
        let _self = this
        _self.$ajax.post('/weChat/deleteReply', {_id: id}).then(function (response) {
          if (response.data.code === 0) {
            _self.replyList()
          } else {
            _self.$message('删除失败！')
          }
        }).catch(function (error) {
          console.log(error)
        })
      },
      viewText(textData) {
        this.activeName = 'second'
        this.textData = textData
      },
      textSubmit() {
        let _self = this
        if (_self.textData.title === '' || _self.textData.textVal === '') {
          _self.$message('回复名称和回复内容不能为空！')
          return
        }
        if (!(/^[0-9]*$/.test(_self.textData.weight))) {
          this.$message('权重只能为数字！')
          this.textData.weight = ''
          return
        }
        if (_self.textReplyBoolean) {
          return
        }
        _self.textReplyBoolean = true
        _self.$ajax.post('/weChat/replyContent', {
          textData: _self.textData
        }).then(function (response) {
          _self.textReplyBoolean = false
          if (response.data.code === 0) {
            _self.activeName = 'first'
            _self.replyList()
          }
          _self.$message(response.data.msg)
        }).catch(function (error) {
          _self.textReplyBoolean = false
          console.log(error)
        })
      },
      replyList() {
        let _self = this
        _self.$ajax.get('/weChat/replyList?type=text').then(function (response) {
          if (response.data.code === 0) {
            _self.textDataList = response.data.textDataList
          } else {
            _self.$message('获取列表失败！')
          }
          _self.textReplyBoolean = false
        }).catch(function (error) {
          _self.textReplyBoolean = false
          console.log(error)
        })
      }
    },
    watch: {
      activeName() {
        if (this.activeName === 'first') {
          this.textData = {
            'title': '',
            'menuKey': '',
            'textKey': '',
            'type': 'text',
            'textVal': '',
            'weight': ''
          }
        }
      }
    }
  }
</script>
<style lang="less">
  .text-input {
    position: relative;
    .numText {
      position: absolute;
      right: 15px;
      bottom: 5px;
      color: #999;
    }
  }
</style>
